<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="Vitamin.css" rel="stylesheet">
</head>

<body>
    <!--设置头部导航栏-->
    <div class="nav">
        <span class="logo"><img src="images/千库logo.png" alt="" width="26px" height="26px">
            <h2>千库</h2>
        </span>
        <span>
            <ul>
                <li><a href="#">网站首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">新闻中心</a></li>
                <li><a href="#">产品中心</a></li>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">下载APP</a></li>
            </ul>
        </span>
    </div>
    <!--导航栏结束-->
    <!-- 设置轮播图 -->
    <div id="wrap">
        <!-- 图片列表 -->
        <div class="img-list">
            <img src="images/bgp-upgrade.png" alt="">
            <img src="images/bgp-upgrade.png" alt="">
            <img src="images/bgp-upgrade.png" alt="">
            <img src="images/bgp-upgrade.png" alt="">
            <img src="images/bgp-upgrade.png" alt="">
        </div>
        <!-- 小箭头 -->
        <div class="arrow">
            <a href="javascript:;" class="left">&lt;</a>
            <a href="javascript:;" class="right">&gt;</a>
        </div>
        <!-- 小圆点 -->
        <ul class="circle-list">
            <li class="circle active" data-n="0"></li>
            <li class="circle" data-n="1"></li>
            <li class="circle" data-n="2"></li>
            <li class="circle" data-n="3"></li>
            <li class="circle" data-n="4"></li>
        </ul>
    </div>
    <!--轮播图结束-->
    <!--设计方案部分-->
    <div class="design">
        <span class="line"></span>
        <span class="txt">设计方案<br><span class="words">Design scheme</span></span>
        <span class="line"></span>
    </div>
    <div class="photos">
        <!-- 使用grid布局 -->
        <div id="one" class="images"></div>
        <div id="two" class="images"></div>
        <div id="three" class="images"></div>
        <div id="four" class="images"></div>
    </div>
    <!--设计方案结束-->
    <!--加入我们部分-->
    <div class="join">
        <div class="container">
            <p>优秀设计师在中国</p>
            <p>——专业为本 客户为先——</p>
            <div class="part"><a href="#">加入我们>></a></div>
        </div>
    </div>
    <!--加入我们结束-->
    <!--经典案例部分-->
    <div class="case">
        <div class="header">

            <span class="line"></span>
            <span class="txt">经典案例<br><span class="words">Classic case</span></span>
            <span class="line"></span>

            <!-- <span class="title"><p><h4>经典案例</h4>Classic case</p></span> -->
        </div>
        <div class="cases">

            <ul>
                <li><img src="images/case1.png" alt="" width="170px" height="300px">
                    <div class="info">01<div class="triangle"></div>建筑设计</div>
                </li>
                <li>
                    <div class="info">02<div class="triangle"></div>建筑设计</div><img src="images/case2.png" alt=""
                        width="170px" height="300px">
                </li>
                <li><img src="images/case3.png" alt="" width="170px" height="300px">
                    <div class="info">03<div class="triangle"></div>建筑设计</div>
                </li>
                <li>
                    <div class="info">04<div class="triangle"></div>建筑设计</div><img src="images/case4.png" alt=""
                        width="170px" height="300px">
                </li>
                <li><img src="images/case5.png" alt="" width="170px" height="300px">
                    <div class="info">05<div class="triangle"></div>建筑设计</div>
                </li>
            </ul>
        </div>
    </div>
    <!--经典案例结束-->
    <!--签约流程部分-->
    <div class="process">
        <div class="header">
            <span class="line"></span>
            <span class="txt">签约流程<br><span class="words">Signing process</span></span>
            <span class="line"></span>
            <!-- <span class="title"><p><h4>签约流程</h4>Signing process</p></span> -->
            <p class="member">会员入会、会员级别、会员账户、会员积分、奖励规则、会员活动管理</p>
            <span class="box">
                <div class="box1">识别与获取</div>
            </span><span class="arrow"><img src="images/longarrow.svg" alt="" width="40px" height="20px"></span><span
                class="box">
                <div class="box1">保有与联系</div>
            </span><img src="images/longarrow.svg" alt="" width="40px" height="20px"><span class="box">
                <div class="box1">最大化价值提升</div>
            </span>
        </div>
    </div>
    <!--签约流程结束-->
    <!--关于我们部分-->
    <div class="introduction">
        <header><span class="line"></span>
            <span class="txt">关于我们<br><span class="words">About us</span></span>
            <span class="line"></span>
            <p class="member">会员入会、会员级别、会员账户、会员积分、奖励规则、会员活动管理</p>
        </header>
        <div class="wrapper">
            <div class="one"><div class="flash-bar"></div><img src="images/aboutp.png" alt="" width="430px" height="250px"></div>
            <div class="two">
                <p class="para-info">
                <h3>千库电子商务有限公司</h3><br>
                <div class="para">我们可以直接在图片标签设置宽度 width 和高度height，
                    这里需要注意的是 HTML img 标签内直接设置宽度和高度值不需要 html单位 ，默认为 PX像素 。 img标签内设
                    置 高度 宽度优点直观，对于文章内插入图片可用此方法控制设置图片高度宽度。</div>
                </p>
                <div class="search">
                    <div class="ask"><input type="text"></div>
                    <div class="more"><a href="">MORE>></a></div>
                </div>
            </div>
        </div>
    </div>
    <!--关于我们部分结束-->
    <!--末尾部分开始-->
    <div class="footer">
            <p class="p-first">
            <h1>联系我们</h1>
            <h3 class="h3-about">ABOUT US</h3>
            </p>
            <div class="summary">
                <div class="restrict">
                    <ul>
                        <li><a href="">网站首页</a></li>
                        <li><a href="">关于我们</a></li>
                        <li><a href="">新闻中心</a></li>
                        <li><a href="">产品中心</a></li>
                    </ul>
                </div>
            </div>
            <div class="detail">
                <p class="p-detail">
                    千库网Copyright © 2014-2019 沪ICP备10011451号-26 <br>
                    ICP证书: 沪B2-20180057 <br>
                    沪公网安备 31011502008675号 <br>
                    工业和信息化部举报邮箱：<a href="#">588ku@hanmaker.com</a>网上有害信息举报专区
                </p>
            <!-- </div> -->
        </div>
        <script>
            // 获取左右按钮和图片列表
            let oLeft = document.querySelector(".left");
            let oRight = document.querySelector(".right");
            let oImgList = document.querySelector(".img-list");
            //克隆第一张图片
            let cloneFirstImg = oImgList.firstElementChild.cloneNode();
            //将第一张图片添加到图片列表末尾
            oImgList.appendChild(cloneFirstImg);
            //图片索引，代表当前是第几张图片 index=0为第一张图片
            let index = 0;
            //设置函数节流锁
            let lock = true;
            function handleRightBtn() {
                if (!lock) return;
                index++;
                oImgList.style.left = index * (-1348) + "px";
                //最后一张假图会去掉过渡，影响新的一轮
                oImgList.style.transition = "0.5s ease";
                if (index === 5) {
                    index = 0;
                    setTimeout(() => {
                        oImgList.style.left = 0;
                        oImgList.style.transition = "none";
                    }, 500);
                }
                //设置小圆点的高亮
                setCircles();

                //关锁
                lock = false;
                setTimeout(() => {
                    lock = true;
                }, 500);
            }
            //右边按钮的实现
            oRight.addEventListener("click", handleRightBtn);
            //左边按钮的实现，瞬间切换到假图然后拉到真实最后一张图片
            oLeft.addEventListener("click", () => {
                if (!lock) return;
                index--;
                if (index === -1) {
                    oImgList.style.left = 5 * (-1348) + "px";
                    oImgList.style.transition = "none";
                    index = 4;
                    setTimeout(() => {
                        oImgList.style.left = index * (-1348) + "px";
                        oImgList.style.transition = "0.5s ease";
                    }, 0);
                } else {
                    oImgList.style.left = index * (-1348) + "px";
                }
                //设置小圆点的高亮
                setCircles();
                lock = false;
                setTimeout(() => {
                    lock = true;
                }, 500);
            });
            //获取五个小圆点
            const circles = document.querySelectorAll(".circle");
            //小圆点高亮显示
            function setCircles() {
                for (let i = 0; i < circles.length; i++) {
                    if (i === index) {
                        circles[i].classList.add("active");
                    }
                    else {
                        circles[i].classList.remove("active");
                    }
                }
            }
            //点击小圆点切换图片，使用事件代理
            const oCircle = document.querySelector(".circle-list");
            oCircle.addEventListener("click", (e) => {
                //当点击小圆点
                if (e.target.nodeName.toLowerCase() === "li") {
                    //data-n和index一一对应
                    const n = Number(e.target.getAttribute("data-n"));
                    index = n;
                    setCircles();
                    oImgList.style.transition = "0.5s ease";
                    oImgList.style.left = index * (-1348) + "px";
                }
            });
            //自动轮播
            let autoplay = setInterval(handleRightBtn, 2000);
            const oWrap = document.getElementById("wrap");
            //移入停止轮播
            oWrap.addEventListener("mouseenter", () => {
                clearInterval(autoplay);
            });
            //移出继续轮播
            oWrap.addEventListener("mouseleave", () => {
                //设表先关
                clearInterval(autoplay);
                autoplay = setInterval(handleRightBtn, 2000);
            });
        </script>
</body>

</html>